<template>
  <div class="public_facilities">
    <van-nav-bar
      title="公共设施"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="300"
      >
        <ul>
          <li
            class="facilities_card"
            v-for="item in facilitiesList"
            :key="item.id"
            @click="facilitiesDetail(item.id)"
          >
            <img v-lazy="item.images" :key="item.images"/>
            <div class="card_title">{{ item.name }}</div>
            <div class="card_content">{{ item.description }}</div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import api from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      facilitiesList: [],
      curPage: 1,
      pageSize: 10,
      isLoading: false,
      loading: false,
      finished: false
    };
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.facilitiesList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getList();
    },
    getList() {
      const data = {
        neighborhoodId: JSON.parse(localStorage.getItem("userInfo"))
          .neighborhoodId,
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      api.community_community_facility_page(data).then(res => {
        if (res.code === "0") {
          if (
            (res.datas && res.datas.records.length === 0) ||
            res.datas === null
          ) {
            this.$toast("暂无更多数据");
            this.loading = false;
            this.isLoading = false;
            this.finished = true;
            return;
          }
          this.facilitiesList = [...this.facilitiesList, ...res.datas.records];
          this.$nextTick(() => {
            this.loading = false;
            this.isLoading = false;
          });
          if (res.datas.records.length < this.pageSize) {
            this.finished = true;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    facilitiesDetail(val) {
      this.$router.push({ name: "facilityManage", query: { id: val } });
    }
  }
};
</script>

<style lang="scss" scoped>
.public_facilities {
  height: 100%;
  
  
  ul {
    padding: 10px 15px;
    li {
      width: 167.5px;
      float: left;
      background: #ffffff;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4.845px;
    }
    li:nth-child(2n) {
      margin-left: 10px;
    }
    li:nth-child(n + 3) {
      margin-top: 10px;
    }
  }
  /deep/ .van-list__finished-text {
    clear: both;
  }
  // /deep/ .van-pull-refresh__track {
  //   height: 100%;
  // }
  .facilities_card {
    display: flex;
    flex-wrap: wrap;
    img {
      height: 121.5px;
      width: 167.5px;
      border-top-left-radius: 4.845px;
      border-top-right-radius: 4.845px;
    }
    .card_title {
      font-size: 12px;
      color: #2d3031;
      margin: 9px 10.25px 0;
      line-height: 16.5px;
      width: 100%;
    }
    .card_content {
      font-size: 10px;
      color: #666666;
      margin: 3px 10.25px 11px;
      line-height: 14px;
      width: 100%;
    }
  }
}
</style>
